<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    .box {
      width: 300px;
      height: 150px;
      border: 5px solid #ccc;
      margin-bottom: 20px;
    }

    .box:first-child {
      /* 组合写法  图片地址  切割尺寸 / 边框宽度  平铺方式 默认拉伸 stretch */
      border-image: url(./images/border.jpg) 167/20px stretch;
    }

    .box:nth-child(2) {
      /* 拆分写法 */
      /* 图片地址 */
      border-image-source: url(./images/border.jpg);
      /* 切割尺寸 */
      border-image-slice: 167 167 167 167;
      /* 宽度 */
      border-image-width: 20px;
      /* 平铺方式 */
      border-image-repeat: round;
    }

    .box:last-child {
      border-image: url(./images/border.jpg) 167/20px repeat;
    }

    /* 伪类选择器（序号） */
    /* 1. 根据.box找到父元素 */
    /* 2. 父元素是body */
    /* 3. 找到所有子元素 */
    /* 4. :last-child 获取最后一个子元素 */
    /* 5. 如果 类型是.box 选择器有效  否则无效 */
    /* 总结：最好在同类型的子元素中使用序号选择器 */
  </style>
</head>

<body>
  <div class="box">

  </div>
  <div class="box">

  </div>
  <div class="box">

  </div>
  <script>
    // 1. 随机打乱数组的顺序
    var arr = [1, 5, 10, 8]

    // 双轴快排

    // 从小到大
    console.log(arr.sort(function(a,b){ return a-b }))
    // 从大到小
    console.log(arr.sort(function(a,b){ return b-a }))
    // a-b 大于0  a 排在 b 后面
    // a-b 小于0  a 排在 b 前面
    // 如果 返回的值 随机的大于或小于0  排序打乱
    console.log(arr.sort(function(a,b){ return 0.5-Math.random() }))


    // 2. 使用 ES6 模版字符进行字符串拼接
    // ECMAsciprt6 
    var data = {name: 'xyy', age: '35'}
    var html = `<div> 
                  <span>${data.name}</span>  
                  <span>${data.age}</span> 
                </div>`

    console.log(html)            
  </script>
</body>

</html>